<template>
	<view class="divider-box">
		<view class="divider-line" :style="{ background: lineChangeColor, width }"></view>

		<view class="divider-text" :style="{ backgroundColor, color: textColor, fontSize: fontSize + 'px'}">
			<xl-loading v-if="loading" type="rotateCircle" :size="18"></xl-loading>
			<view v-if="loading" style="width: 10px;"></view>
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	// 组件传参
	import propsData from './props.js'
	const props = defineProps(propsData)
	
	const lineChangeColor = computed(()=>{
		if (Array.isArray(props.lineColor)) {
			const [a, b] = props.lineColor || [];
			return `linear-gradient(to right, ${a}, ${b}, ${b}, ${a})`;
		} else {
			return props.lineColor;
		}
	})
</script>

<style lang="scss" scoped>
	.divider-box {
	    height: 40px;
	    width: 100%;
	    position: relative;
	    text-align: center;
		// width=content+padding+border，padding，border有设置值，content会随着实际的宽度进行自动缩放
	    box-sizing: border-box;
	}
	.divider-line {
	    position: absolute;
	    height: 0.5px;
	    top: 50%;
	    left: 50%;
	    transform: scaleY(0.5) translateX(-50%) translateZ(0);
	}
	.divider-text {
		position: absolute;
		top: 50%;
		left: 50%;
		padding: 0 15px;
		color: #303133;
		font-size: 13px;
		transform: translateX(-50%) translateY(-50%);
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>